<template>
  <div class="join-box">
    <div class="join-rule" @click="lotteryRule">抽奖规则</div>
    <!-- 未参与 -->
    <div class="join-head" v-if="data.applied == 0 && data.open == 0">
      <span class="join-title">{{ data.prompt }}</span>
      <div class="join-btn" @click="attentLottery" v-show="$UA.isJM">{{ btnText }}</div>
      <div
        class="join-btn"
        v-show="!$UA.isJM"
        id="join"
        v-app-jump="{
          to: openUrl,
          params: { ymscheme: ymParmas },
        }"
        youmeng="youmeng"
      >
        {{ btnText }}
      </div>
      <div class="join-avatar" v-if="data.avatars.length">
        <div
          class="join-avatar-item"
          v-for="(item, index) in data.avatars.slice(0, 10)"
          :key="index"
        >
          <img :src="item" />
        </div>
      </div>
      <div class="join-number" v-if="data.personCnt">
        已有
        <span>{{ data.personCnt }}</span>
        人参与抽奖
      </div>
    </div>
    <!-- 已参与，未开奖 -->
    <div class="join-head" v-if="data.applied == 1 && data.open == 0">
      <span class="join-tip">{{ this.showTime }}</span>
      <div class="join-wait">
        <div class="circle-flex">
          <div class="point"></div>
          <div class="point two"></div>
          <div class="point three"></div>
        </div>
        <span class="join-title" @click="showRule = true">{{ '待开奖' }}</span>
        <div class="circle-flex right">
          <div class="point three"></div>
          <div class="point two"></div>
          <div class="point one"></div>
        </div>
      </div>
      <div class="join-avatar">
        <div class="join-avatar-item" v-for="(item, index) in data.avatars" :key="index">
          <img :src="item" />
        </div>
        <div class="join-avatar-item" @click="inviteOther">
          <img src="../assets/images/activity/icon-add.png" />
        </div>
      </div>
      <div class="join-invite" v-if="data.personCnt">
        已邀请
        <span>{{ data.personCnt }}</span>
        人，中奖概率提高
        <span>{{ data.times }}</span>
        倍
      </div>
      <div class="join-btn" @click="inviteOther">{{ btnText }}</div>
    </div>
    <!-- 未中奖、活动结束 -->
    <div
      class="join-head"
      v-if="
        (data.applied == 1 && data.lucky == 0 && data.open) ||
        (data.applied == 0 && data.open && data.lucky == 0)
      "
    >
      <div class="join-title not">
        「
        <span v-if="data.applied == 1 && data.open == 1 && data.lucky == 0">
          {{ '抱歉，您未中奖' }}
        </span>
        <span v-if="data.applied == 0 && data.open == 1">{{ '活动已结束' }}</span>
        」
      </div>
      <div class="join-avatar" v-if="data.avatars">
        <div
          class="join-avatar-item"
          v-for="(item, index) in data.avatars.slice(0, 10)"
          :key="index"
        >
          <img :src="item" />
        </div>
      </div>
      <div class="join-win" v-if="data.personCnt">
        已有
        <span>{{ data.personCnt }}</span>
        人中奖，下一个也许就是你
      </div>
      <div class="join-btn" @click="followJimu" v-if="!userFLInfo.followed">{{ btnText }}</div>
      <div class="join-tip win" v-if="!userFLInfo.followed">
        关注{{ userFLInfo.nickname }}，精彩活动不错过！
      </div>
    </div>
    <!-- 已中奖 -->
    <div class="join-head" v-if="data.open == 1 && data.lucky == 1">
      <div class="join-title not">
        「
        <span>恭喜，您抽中了{{ data.rewardTitle }}</span>
        」
      </div>
      <div class="join-goods">
        <img :src="data.rewardImage" />
      </div>
      <div class="join-btn" @click="connectJimu" v-show="$UA.isJM">{{ btnText }}</div>
      <div
        class="join-btn"
        id="contact"
        v-show="!$UA.isJM"
        v-app-jump="{
          to: openUrl,
          params: { ymscheme: ymParmas },
        }"
        youmeng="youmeng"
      >
        {{ btnText }}
      </div>
      <div class="join-tip win">联系{{ userFLInfo.nickname }}，马上领大奖！</div>
    </div>
    <van-popup
      v-model="showRule"
      closeable
      round
      position="bottom"
      @close="closePop"
      :style="{ height: '70%' }"
    >
      <h2>抽奖规则</h2>
      <p class="title">一、抽奖规则：</p>
      <p>
        1、用户参加抽奖活动，如遇到虚拟奖品等无需提供联系方式时，奖品将在3个工作日内自动发放至中奖用户个人账户；
      </p>
      <p>
        2、用户参加抽奖活动，如遇到需提供联系方式、个人信息时，应在中奖后3个工作日内将信息私信至积幕福利官，如未在规定期限内提供相关信息，积幕有权视为放弃中奖资格；
      </p>
      <p>
        3、用户发布的内容均以后台审核通过为准，若存在多次恶意发布无意义内容，积幕有权未经通知取消其参与资格；
      </p>
      <p>
        4、积幕将在收到中奖用户相关信息的15个工作日内按照中奖用户提供的信息发放奖品，如使用物流寄送发生纠纷，由用户自行解决。
      </p>
      <p class="title">二、法律声明：</p>
      <p>
        1、用户不得采取任何不正当或作弊的违规手段参与本活动，一经发现，平台有权限制或取消用户参与活动的资格，有权取消奖励、追讨用户已领取的奖励；
      </p>
      <p>
        2、若由于用户自身原因（包括但不限于参与方式不符合活动规则、操作不当造成产品功能故障、未及时领取奖励等）导致无法实际享有奖励的，视为用户自愿放弃奖励，平台将不会也无义务给予任何形式的补偿；
      </p>
      <p>
        3、平台现行有效的《积幕用户服务协议》、《积幕隐私政策》（统称为「前述协议」）同样适用于本活动，本活动规则及相关条款与前述协议相冲突的，以本活动规则及相关条款为准。本活动规则及相关条款未约定的内容，仍以前述协议为准；
      </p>
      <p>
        4、在法律法规允许的范围内，平台有权对本活动规则进行变动或调整，相关变动或调整将公布在活动规则页面上，并于公布时即时生效，用户继续参与活动则视为同意并接受变动或者调整后的活动规则。如果用户拒绝活动规则的变更或者调整，请放弃参与变更后的活动。
      </p>
      <h3>*本活动最终解释权归积幕所有</h3>
    </van-popup>
  </div>
</template>
<script>
  import mixins from 'mixins';
  import { Popup, Toast } from 'vant';
  export default {
    mixins: [mixins],
    props: {
      lotteryId: {
        type: String,
      },
    },
    data() {
      return {
        showRule: false,
        data: {},
        showTime: '',
        timeOut: false, //倒计时是不是到了开奖时间
        timer: '', //定时器
        ymParmas: '', //友盟参数
        userFLInfo: {}, //配置的uuid的信息
        userInfoDataApp: {}, //从app获取信息
        openUrl: `mtjimu://webview?url=${encodeURIComponent(window.location.href)}`,
        lotteryQuery: {},
      };
    },
    components: {
      // vant组件
      'van-popup': Popup,
    },
    computed: {
      btnText() {
        // if (this.data.applied == 0 && this.data.open == 0) {
        //   //未参与
        //   return '参与抽奖';
        // } else if (this.data.open && this.data.lucky) {
        //   //中奖了
        //   return '联系' + this.userFLInfo.nickname;
        // } else if (this.data.applied == 1 && this.data.open == 0) {
        //   //未开奖
        //   return '邀请好友提高中奖概率';
        // } else if (this.data.applied == 1 && this.data.open == 1) {
        //   //未中奖
        //   return '关注' + this.userFLInfo.nickname;
        // } else {
        //   //活动结束
        //   return '关注' + this.userFLInfo.nickname;
        // }

        if (this.data.applied == 0 && this.data.open == 0) {
          //未参与
          return '参与抽奖';
        } else if (this.data.applied == 1 && this.data.open == 0) {
          //未开奖
          return '邀请好友提高中奖概率';
        } else if (this.data.applied == 1 && this.data.open == 1 && this.data.lucky == 0) {
          //未中奖
          return '关注' + this.userFLInfo.nickname;
        } else if (this.data.applied == 0 && this.data.open == 1 && this.data.lucky == 0) {
          //活动结束
          return '关注' + this.userFLInfo.nickname;
        } else if (this.data.open == 1 && this.data.lucky == 1) {
          //中奖了
          return '联系' + this.userFLInfo.nickname;
        } else {
          return '关注' + this.userFLInfo.nickname;
        }
      },
    },

    watch: {
      lotteryId: {
        handler(val) {
          this.lotteryId = val;
          if (val) {
            this.getLotteryDetail();
          }
        },
        immediate: true,
        deep: true,
      },
      timeOut: {
        handler(val) {
          setTimeout(() => {
            this.getLotteryDetail();
          }, 5000);
          this.showTime = '正在开奖';
          this.timer = null;
        },
      },
    },

    created() {
      // 设置参数
      let _query = [];
      _query = window.location.href.split('?')[1].slice(3).split('-');
      this.lotteryQuery.id = _query[0] || '';
      this.lotteryQuery.uuid = _query[1] || '';

      // 设置友盟参数
      this.ymParmas = `https://${
        process.env.NODE_ENV === 'development' ? 'dev-' : ''
      }jimu-h5.movtile.com/activity/lottery.html?id=${
        this.lotteryQuery.uuid
          ? this.lotteryQuery.id + '-' + this.lotteryQuery.uuid
          : this.lotteryQuery.id
      }`;
      this.ymParmas = `mtjimu://webview?url=${encodeURIComponent(this.ymParmas)}`

      // Toast(this.ymParmas)
    },

    mounted() {
      // // 评论抽奖
      // this.$EventBus.$on('CommentLottery', (val) => {
      //   this.attentLottery();
      // });

      // 刷新
      this.$EventBus.$on('jm:hybridActive', () => {
        // 这里或者可以写this.getUserInfo()，这样之后$userInfo里面就会有数据
        // 从app获取用户信息
        this.$appService.userInfo().then((res) => {
          this.userInfoDataApp = res;
        });
      });
    },

    methods: {
      // 获取配置的uuid的信息
      getFlUserInfo(val) {
        this.$service.UserFollowSingle({ uuid: val }).then((res) => {
          this.userFLInfo = res;
        });
      },

      // 这里是变化的时间
      changeTime() {
        let newTime = +new Date();
        let time = (this.data.endTime - newTime) / 1000;
        if (time <= 0) {
          this.timeOut = true;
          this.showTime = '';
          return;
        }
        // 天
        let d = parseInt(time / 60 / 60 / 24);
        this.showTime = d + '天';
        // 小时
        let h = parseInt((time / 60 / 60) % 24);
        // 不够10就加0
        h = h >= 10 ? h : '0' + h;
        this.showTime += h + '时';
        // 分钟
        let m = parseInt((time / 60) % 60);
        m = m >= 10 ? m : '0' + m;
        this.showTime += m + '分';
        // 秒
        let s = parseInt(time % 60);
        s = s >= 10 ? s : '0' + s;
        this.showTime += s + '秒后开奖';
      },

      // 打开规则滚动到顶部
      closePop() {
        let popNode = document.querySelector('.van-popup');
        popNode.scrollTop = 0;
      },
      //抽奖规则
      lotteryRule() {
        this.showRule = true;
      },
      //获取抽奖详情
      getLotteryDetail() {
        this.$service.SalesLotteryDetail({ lotteryId: this.lotteryId }).then((res) => {
          this.data = res;

          // 先处理一下数据，把时间变成毫秒
          // ios得改时间格式
          if (this.$UA.isIOS) {
            this.data.endTime = +new Date(this.data.endTime.replace(/-/g, '/'));
          } else {
            this.data.endTime = +new Date(this.data.endTime);
          }
          this.changeTime();
          this.timer = setInterval(this.changeTime, 1000);

          // 获取配置的uuid的信息
          this.getFlUserInfo(this.data.uid);
        });
      },
      //参与抽奖
      attentLottery() {
        // 这里不知道啥原因会第一次的时候会获取不到$userInfo
        if (this.$userInfo.nickname || this.userInfoDataApp.nickname) {
          this.$service.UserFavorAdd({ subjectId: this.lotteryId, subjectType: 9 }).then((res1) => {
            this.$service.UserFavorAdd({ subjectId: this.lotteryQuery.id, subjectType: 8 }).then((res) => {
              this.getLotteryDetail();
            });
          });
        } else {
          this.login();
        }
      },
      //关注积幕账号
      followJimu() {
        if (this.$userInfo.nickname || this.userInfoDataApp.nickname) {
          if (this.userFLInfo.followed) return;
          this.$service.UserFollowAdd({ uuid: this.data.uid }).then((res) => {
            this.$Toast('关注成功');
            this.getLotteryDetail();
          });
        } else {
          this.login();
        }
      },
      //联系积幕
      connectJimu() {
        if (this.$userInfo.nickname || this.userInfoDataApp.nickname) {
          if (this.$UA.isJM) {
            this.$appService.openLink({
              link: `mtjimu://chat?uid=${this.data.uid}`,
            });
          } else {
            window.location.href = new URL(
              `https://${
                process.env.NODE_ENV === 'development' ? 'dev-' : ''
              }message.movtile.com/chat?uuid=${this.data.uid}`,
            );
          }
        } else {
          this.login();
        }
      },
      //邀请好友
      inviteOther() {
        // 处理一下数据
        let _data = {};
        // 分享链接
        _data.shareUrl = `https://${
          process.env.NODE_ENV === 'development' ? 'dev-' : ''
        }jimu-h5.movtile.com/activity/lottery.html?id=${
          this.$userInfo.uuid
            ? this.lotteryQuery.id + '-' + this.$userInfo.uuid
            : this.lotteryQuery.id
        }`;
        // 分享页面的标题
        _data.shareTitle = '分享活动';
        // 分享的背景图片
        _data.shareImg = this.data.shareImage;
        // type为1代表盲盒的分享,2代表互动活动的分享
        _data.type = 2;
        // 其他信息
        _data.myOption = {
          // 这里面可以覆盖二维码的背景前景色或者大小啥的
          width: '85',
          hight: '85',
        };
        // 传递数据
        localStorage.setItem('shareImg', JSON.stringify(_data));
        // 分情况，在app里面要用头部的话，得用openlink，不然回来会出现两个头部
        if (this.$UA.isJM) {
          setTimeout(() => {
            this.$appService.openLink({
              link: `https://${
                process.env.NODE_ENV === 'development' ? 'dev-' : ''
              }jimu-h5.movtile.com/activity/sharecard.html`,
            });
          }, 500);
        } else {
          setTimeout(() => {
            window.location.href = new URL(`sharecard.html`, window.location.href);
          }, 500);
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  .join-box {
    position: relative;
    background-color: #fff;
    padding-bottom: 3rem;
  }
  .join-head {
    width: 100%;
    align-items: center;
    padding-top: 24px;
    justify-content: center;
    text-align: center;
  }
  .join-tip {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #888888;
  }
  .join-title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff3685;
  }
  .not {
    padding-top: 14px;
  }
  .join-wait {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
  }
  .circle-flex {
    display: flex;
  }
  .right {
    margin-left: 10px;
  }
  .point {
    width: 4px;
    height: 4px;
    background: #ff3685;
    opacity: 0.3;
    border-radius: 50%;
    margin-right: 10px;
  }
  .two {
    opacity: 0.59;
  }
  .three {
    opacity: 1;
  }
  .one{
    margin-right: 0px;
  }
  .join-btn {
    margin: auto;
    margin-top: 24px;
    width: 240px;
    height: 49px;
    background: linear-gradient(315deg, #ff597c 0%, #ff51ed 51%, #59a8ff 100%);
    box-shadow: 0px 4px 12px -6px #c644ff;
    border-radius: 25px;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    line-height: 49px;
    padding: 0rem 8px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .join-avatar {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    .join-avatar-item {
      width: 32px;
      height: 32px;
      //   border: 2px solid #ffffff;
      &:first-child {
        margin-left: 0px;
      }
      margin-left: -10px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 2px solid #ffffff;
      }
    }
  }
  .join-number {
    margin-top: 12px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #888888;
  }
  .join-invite {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #111111;
    span {
      color: #ff3685;
    }
    &::after {
      content: '';
      display: block;
      width: 20px;
      height: 20px;
      background-image: url(../assets/images/activity/icon-invite.png);
      background-repeat: no-repeat;
      background-size: 20px;
    }
  }
  .join-win {
    margin-top: 12px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #888888;
  }
  .win {
    margin-top: 12px;
  }
  .join-goods {
    margin: auto;
    margin-top: 24px;
    width: 190px;
    height: 190px;
    background-size: contain;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    &::before {
      content: '';
      width: 5.6rem;
      height: 6.6rem;
      position: absolute;
      bottom: 0px;
      left: -25px;
      background: url('../assets/images/lottery/d-left.png');
      background-size: cover;
    }
    &::after {
      content: '';
      width: 6rem;
      height: 6.3rem;
      position: absolute;
      bottom: 0px;
      right: -25px;
      background: url('../assets/images/lottery/d-right.png');
      background-size: cover;
    }
  }

  .join-rule {
    position: absolute;
    top: 20px;
    right: 0;
    width: 60px;
    height: 21px;
    background: #f3f3f3;
    border-radius: 100px 0px 0px 100px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #888888;
    line-height: 21px;
    text-align: center;
  }
  /deep/ .van-popup {
    color: #666;
    padding: 2rem 2rem;
    h2 {
      text-align: center;
      margin-bottom: 1rem;
      font-size: 1.4rem;
    }
    h3 {
      line-height: 2;
      font-size: 1.4rem;
      font-weight: 400;
    }
    .title {
      font-size: 1.4rem;
    }
    p {
      font-size: 1.4rem;
      line-height: 2;
    }
  }
</style>
